<template>
  <div class="login-wrap">
    <el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px"
             class="demo-ruleForm login-container">
      <h3 class="title">个 人 中 心</h3>
      <el-form-item prop="userAccount">
        <el-input type="text" style="width:80%;" v-model="ruleForm.userAccount" auto-complete="off" readonly
                  placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item prop="userName">
        <el-input type="text" style="width:80%;" v-model="ruleForm.userName" auto-complete="off"
                  placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item prop="sex">
        <el-select v-model="ruleForm.sex" placeholder="请选择性别" style="float: left; margin-left: 44px; width: 80%;">
          <el-option key="1" label="男" value="1"></el-option>
          <el-option key="2" label="女" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="age">
        <el-input type="text" style="width:80%;" v-model="ruleForm.age" auto-complete="off"
                  placeholder="年龄"></el-input>
      </el-form-item>
      <el-form-item prop="phoneNumber">
        <el-input type="text" style="width:80%;" v-model="ruleForm.phoneNumber" auto-complete="off"
                  placeholder="电话号码"></el-input>
      </el-form-item>
      <el-form-item style="width:100%;text-align:center;">
        <el-button type="primary" style="width:80%;background-color:#a11a1a;border:none;" @click="submitForm"
                   :loading="logining">确认
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import * as api from '../../api/interface'

export default {
  data() {
    return {
      //定义loading默认为false
      logining: false,
      //输入的数据--与实体属性名相同
      ruleForm: {
        userAccount: '',
        userPassword: ''
      },
      user: {},
      //rules前端验证，当输入框为空时
      rules: {
        userAccount: [{required: true, message: '请输入账号', trigger: 'blur'}],
        userName: [{required: true, message: '请输入姓名', trigger: 'blur'}],
        sex: [{required: true, message: '请选择性别', trigger: 'blur'}],
        age: [{required: true, message: '请输入年龄', trigger: 'blur'}],
        phoneNumber: [{required: true, message: '请输入电话号码', trigger: 'blur'}],
      }
    }
  },
  // 页面初始化操作
  created() {
    let userId = window.localStorage.getItem("userId");
    if (!userId) {
      this.$message.error("登录失效，请重新登录");
      this.$router.push({
        //前端路径
        path: '/login'
      })
      return;
    }
    this.ruleForm.userId = userId;
    api.queryUserById({"userId": userId}).then(data => {
      if (data.message != "success") {
        //查询不成功时设置，error为红色
        this.$message.error("登录失效，请重新登录");
        this.$router.push({
          //前端路径
          path: '/login'
        })
      } else {
        this.ruleForm = data.returnObj;
      }
    })
  },
  // 里面的函数只有调用才会执行
  methods: {
    submitForm(formName) {
      //对ref="ruleForm"进行表单验证的规则
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.logining = true
          api.updateUser(this.ruleForm).then(data => {
            this.logining = false;
            if (data.message != "success") {
              //查询不成功时设置，error为红色
              this.logining = false;
              this.$message.error(data.message)
            } else {
              this.$message.success("修改成功")
              this.$router.go(-1);
            }
          }).catch((error, status) => {
            this.logining = false;
          });
        } else {
          this.$message.error('请输入用户名密码！')
          this.logining = false;
          return false;
        }
      })
    },
  }
}
</script>

<style scoped>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  background-image: url(../../assets/img/bg.png);
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
}

.login-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 450px;
  padding: 40px 35px 35px 35px;
  background-color: rgba(255, 242, 242, 0.8);
  text-align: center;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #291f08;

  /*color:#a11a1a;*/
}

.remember {
  margin: 0px 0px 35px 0px;
}

.code-box {
  text-align: right;
}

.codeimg {
  height: 40px;
}
</style>
